<template>
	<view>
		<view class="questionCard">
			<view>
				<view class="title">答题卡</view>
			</view>
			<view class="t1">
				<text>单选题:</text>
			</view>
			<view class="single">
				<view class="qList" v-for="(item,index) in sQuestionList" :key="item.questionId">
					<button @click="choose" :data-qid="item.questionId" :class="isRight[index+1] == 1 ? 'btn2': isRight[index+1] == 0 ? 'btn3': 'btn1'" >{{item.questionId}}</button>
				</view>
			</view>
			<view class="t2">
				<text>填空题:</text>
			</view>
			<view class="fillBlank">
				<view class="qList" v-for="(item,index) in fQuestionList" :key="item.questionId">
					<button @click="choose" :data-qid="item.questionId" :class="isRight[index+sAll+1] == 1 ? 'btn2': isRight[index+sAll+1] == 0 ? 'btn3': 'btn1'">{{item.questionId}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRight:[],
				ftime:0,
				time:0,
				sQuestionList:[],
				fQuestionList:[],
				selection:[],
				sAll:0,
				empty:0,
				total:0,
				score:0,
				correctNumber:0,
				errorNumber:0,
				showPopup: false,
				totalTime: 7200, // 总时间（单位：秒）
				remainingTime: 7200, // 剩余时间（单位：秒）
				timerId: null,  // 计时器 ID
				condition1: 1,
				condition2: 0,
				value1: 'btn2',
				value2: 'btn3',
				value3: 'btn1'
			}
		},
		methods: {
			listSingle:function(){
				var that = this;
				//挂载后给服务端发请求
				uni.request({
					url:"http://localhost:8888/singleQuestion",
					success(res){
						if(res.data.code==200){
							that.sQuestionList = res.data.data;
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			singleNum:function(){
				var that = this;
				uni.request({
					url:"http://localhost:8888/singleNum",
					success(res) {
						if(res.data.code==200){
							that.sAll=res.data.data[0].sAll;
							console.log("count:"+that.sAll);
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			listFill:function(){
				var that = this;
				//挂载后给服务端发请求
				uni.request({
					url:"http://localhost:8888/FillQuestion",
					success(res){
						if(res.data.code==200){
				
							that.fQuestionList = res.data.data;
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			choose:function(e){
				console.log(e);
				uni.setStorageSync('qid',e.target.dataset.qid);
				uni.navigateTo({
					url:'/pages/questionReview/questionReview'
				});
				// uni.navigateBack({
				// 	delta:1
				// });
			},
			
			
			
			
			
			startTimer() {
			      this.timerId = setInterval(() => {
			        this.remainingTime--;
			        if (this.remainingTime === 0) {
			          clearInterval(this.timerId);
			          // 倒计时结束后的逻辑处理
			          // 例如：提交答题结果或显示时间到达的提示信息
			        }
			      }, 1000); // 每秒执行一次
			    },
			    formatTime(time) {
			      const hours = Math.floor(time / 3600);
			      const minutes = Math.floor((time % 3600) / 60);
			      const seconds = time % 60;
			      return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			    },
			    padZero(value) {
			      return value.toString().padStart(2, '0');
			    }
		},
		beforeDestroy() {
			    clearInterval(this.timerId); // 组件销毁前清除计时器
			  },
		mounted() {
			this.singleNum();
			this.listSingle();
			this.listFill();
			console.log("123"+uni.getStorageSync('isRight'));
			this.isRight=(uni.getStorageSync('isRight'));
			this.ftime=(uni.getStorageSync('ftime'));
			this.time=(uni.getStorageSync('time'));
			this.selection=(uni.getStorageSync('selection'));
			this.total= (uni.getStorageSync('total'));
			this.errorNumber= (uni.getStorageSync('errorNumber'));
			this.score = (uni.getStorageSync('sum'));
			this.correctNumber= (uni.getStorageSync('correctNumber'));
			this.empty=this.total-this.errorNumber-this.correctNumber;
			console.log("sum:"+uni.getStorageSync('sum'));
			this.startTimer();
		}
	}
</script>

<style>
	body {
			background-color:#F0EEEF;
		}
		.s1{
			text-align: center;
		}
		/* 考试分数 */
		.score {
			width: 700rpx;
			margin: 20rpx;
			border: 1px solid red;
			border-radius: 20rpx;
		}
		.score image{
			width: 100rpx;
			height: 100rpx;
		}
		.score >view:nth-child(2) view {
			display: flex;
			justify-content: space-between;
			padding: 4rpx;
		}
		
		/* 考试情况 */
		.title {
			margin-left: 20rpx;
			margin-top: 40rpx;
		}
		.examResult {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 700rpx;
			height: 120rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			border: 1px solid green;
			background-color: #F0EEEF ;
		}
		.examResult view {
			padding-top: 10rpx;
			padding-bottom: 10rpx;
		}
		
		/* 答题卡 */
		/* .questionCard button {
			width: 60rpx;
			height: 60rpx;
			border-radius: 100px;
			background-color: #F0EEEF;
			color: white;
		} */
		.single >view {
			width: 60rpx;
			height: 60rpx;
			border-radius: 100px;
			/* background-color: #F0EEEF; */
			color: white;
			padding-right: 20px;
			padding-top: 20px;
		}
		.fillBlank >view {
			width: 60rpx;
			height: 60rpx;
			border-radius: 100px;
			/* background-color: #F0EEEF; */
			color: white;
			padding-right: 20px;
			padding-top: 20px;
		}
		.qList{
			height: 50px;
			width: 50px;
			border-radius: 50px;
		}
		.btn1{
			height: 50px;
			width: 50px;
			border-radius: 50px;
			background-color: darkgray;
			color: white;
		}
		.btn2{
			height: 50px;
			width: 50px;
			border-radius: 50px;
			background-color: #90A672;
			color: white;
		}
		.btn3{
			height: 50px;
			width: 50px;
			border-radius: 50px;
			background-color:rgb(255, 0, 0,.5) ;
			color: white;
		}
		.single{
			width: 600rpx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			padding-bottom: 20px;
		}
		.fillBlank{
			width: 600rpx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			padding-bottom: 20px;
		}
		
	/* 	.btn1{
				height: 50px;
				width: 50px;
				border-radius: 50px;
				background-color: darkgray;
				color: white;
			}
			.btn2{
				height: 50px;
				width: 50px;
				border-radius: 50px;
				background-color: dodgerblue;
				color: white;
			} */
</style>
